<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters" ref="filters">
				<el-form-item>
					<el-date-picker v-model="filters.startTime" type="datetime" :picker-options="pickerBeginDateBefore" placeholder="开始时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="至">
					<el-date-picker v-model="filters.endTime" type="datetime" :picker-options="pickerBeginDateAfter" placeholder="结束时间"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.logType" placeholder="全部类型" clearable>
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.toUserLevel" placeholder="级别（全部）" clearable>
						<el-option v-for="item in options_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.userType" placeholder="全部" clearable>
						<el-option v-for="item in options_user" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.searchUserID" placeholder="输入用户ID搜索"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.searchUserName" placeholder="输入用户昵称搜索"></el-input>
				</el-form-item>
				<el-form-item style="float:right;">
					<el-button type="primary" v-on:click="getTransactionList">查询</el-button>
				</el-form-item>
			</el-form>
			<el-form :inline="true">
				<el-form-item style="float:left;">
					<el-button type="primary" v-on:click="inviteConfig">邀请有礼规则</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="transaction" highlight-current-row v-loading="listLoading" @selection-change="selsChange" stripe border>
			<el-table-column type="index" width="70" label="编号"></el-table-column>
			<el-table-column prop="toUser" label="邀请者ID" width="100"></el-table-column>
			<el-table-column prop="toUserName" label="邀请者昵称" width="150"></el-table-column>
			<el-table-column prop="toUserLevel" label="级别" width="100" :formatter="formatUserLevel"></el-table-column>
			<el-table-column prop="transactionLog.content" label="类型名称" min-width="150"></el-table-column>
			<el-table-column prop="distriNum" label="收入" min-width="80"></el-table-column>
			<el-table-column prop="fromUser" label="邀请对象ID" min-width="100"></el-table-column>
			<el-table-column prop="fromUserName" label="邀请对象昵称" min-width="150"></el-table-column>
			<el-table-column prop="createTime" label="时间" min-width="80" :formatter="formatDateTime"></el-table-column>
		</el-table>
		
		<el-dialog title="邀请有礼规则" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="120px" ref="addForm">
				<el-form-item label="活动内容" prop="inviteMsg">
					<el-input v-model="addForm.inviteMsg" type="textarea" :rows="6" auto-complete="off" ></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination
				@size-change="handleSizeChange"
				:page-sizes="[10, 15, 20, 30]"
				layout="total, sizes, prev, pager, next, jumper"
				@current-change="handleCurrentChange"
				:page-size="pageSize"
				:total="total"
				style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
	
	import { transactionList, getInviteConfig, modifyInviteConfig } from '../../api/api';
	
	export default {
		data() {
			return {
				//条件查询
				filters: {
					startTime: '',
					endTime: '',
					logType: '',
					toUserLevel: '',
					userType: '',
					searchUserID: '',
					searchUserName: '',
					pageIndex: '',
					pageSize: ''
				},
				addForm: {
					inviteMsg: ''
				},
				pickerBeginDateBefore:{
					disabledDate: (time) => {
						let beginDateVal = this.filters.endTime;
						if (beginDateVal) {
							return time.getTime() > beginDateVal;
						}
					}
				},
				pickerBeginDateAfter:{
					disabledDate: (time) => {
						let beginDateVal = this.filters.startTime;
						if (beginDateVal) {
							return time.getTime() < beginDateVal;
						}
					}
				},
				//初始邀请有礼列表数据
				transaction: [],
				total: 0,
				page: 1,
				pageSize : 20,
				listLoading: false,
				addFormVisible: false,
				addLoading: false,
				sels: [],//列表选中列
				//类型数据
				options: [{
					value: '0',
					label: '注册登录成功'
				}, {
					value: '1',
					label: '购买鸿福商品'
				},{
					value: '2',
					label: '购买旅游商品'
				}, {
					value: '3',
					label: '报名参加活动'
				}],
				//级别数据
				options_level: [{
					value: '1',
					label: '一级'
				}, {
					value: '2',
					label: '二级'
				}, {
					value: '3',
					label: '三级'
				}],
				//用户类别数据
				options_user: [{
					value: '0',
					label: '邀请人'
				}, {
					value: '1',
					label: '邀请对象'
				}]
			}
		},
		methods: {
			//获取活动列表
			getTransactionList() {
				this.$refs.filters.validate((valid)=>{
					if(valid){
						if(!this.filters.startTime || this.filters.startTime == ''){
							this.filters.startTime = null;
						}
						if(!this.filters.endTime || this.filters.endTime == ''){
							this.filters.endTime = null;
						}
						let para = {
							startTime: this.filters.startTime,
							endTime: this.filters.endTime,
							logType: this.filters.logType,
							toUserLevel: this.filters.toUserLevel,
							userType: this.filters.userType,
							searchUserID: this.filters.searchUserID,
							searchUserName: this.filters.searchUserName,
							pageIndex: this.page,
							pageSize: this.pageSize
						};
						
						this.listLoading = true;
						transactionList(para).then((res) => {
							this.transaction = res.data.data;
							if(this.transaction){
								for(var i = 0; i < this.transaction.length; i ++){
									let dataType = this.transaction[i].type;
									if(dataType == 0){
										this.transaction[i].distriNum = this.transaction[i].distriNum+"积分";
									}
									if(dataType == 1){
										this.transaction[i].distriNum = this.transaction[i].distriNum+"元";
									}
								}
							}
							
							this.total = res.data.totalCount;
							this.listLoading = false;
						});
					}
				});
			},
			//显示规则界面
			inviteConfig: function () {
				this.addFormVisible = true;
				let para = {
					id: '1'
				};
				getInviteConfig(para).then((res) => {
					this.addForm = res.data;
				});
			},
			//新增
			addSubmit: function (formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = {
								inviteMsg: this.addForm.inviteMsg
							};
							
							modifyInviteConfig(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getTransactionList();
							});
						});
					}
				});
			},
			//级别显示转换
			formatUserLevel: function (row, column){
				if(row.toUserLevel == 3){
					return '三级'
				}else if(row.toUserLevel == 1){
					return '一级'
				}else if(row.toUserLevel == 2){
					return '二级'
				}else{
					return '未知'
				}
			},
			formatDateTime: function (row, column){
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			//每页显示数据量变更
			handleSizeChange: function(val) {
				this.pageSize = val;
				this.getTransactionList();
			},
			//分页操作
			handleCurrentChange: function(val) {
				this.page = val;
				this.getTransactionList();
			},
			selsChange: function (sels) {
				this.sels = sels;
			}
		},
		mounted() {
			this.getTransactionList();
		}
	}

</script>

<style scoped>

</style>
